<template>
  <div class="departmentManagement-container">
    <modules-title title-name="科室管理">
      <template slot="btn">
        <el-button class="main-btn" size="small" @click="createSection" type="primary">新建科室</el-button>
      </template>
    </modules-title>
    <div class="table">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{background:'#F5F5F5',color:'#000000',textAlign:'center'}"
      >
        <el-table-column
          prop="department_name"
          align="center"
          label="科室名称"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="real_name"
          align="center"
          label="科室成员"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          align="center"
          label="操作"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="editSection(scope.row)">编辑</span> | <span class="delete" @click="deleteSection(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="isCreateSection"
               :width="dialogWidth"
               :before-close="handleClose"
               :title="isEditSection?'编辑科室':'新建科室'">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="content">
          <el-form-item label="科室名称" prop="name">
            <el-col :span="20">
              <el-input v-model="ruleForm.name"></el-input>
            </el-col>
          </el-form-item>
        </div>
      </el-form>
      <div class="footer">
        <el-button size="small" class="border-btn" style="margin-left: 60px" @click="closeDialog()">取消</el-button>
        <el-button type="primary"  class="main-btn" size="small" @click="submitForm()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getDepartmentList,createDepartment,deleteDepartment,editDepartment} from "@/api/clinicManagement";
  import modulesTitle from "@/components/modulesTitle.vue";
  export default {
    name: "departmentManagement",
    components: { modulesTitle },
    data() {
      return {
        dialogWidth:0,
        isCreateSection:false,
        isEditSection:false,
        currentPage:1,
        tableData:[
        ],
        selectData:{
          keyword:'',
          pager:{
            num:1,
            size:10,
          }
        },
        total:0,
        ruleForm:{
          name:''
        },
        rules:{
          name:[
            { required: true, message: '请填写有效科室名称', trigger: 'blur' }
          ]
        },
        id:'',
      };
    },
    created() {
      //监听弹窗宽度变化
      this.setDialogWidth()
      //获取列表
      this.getList(this.selectData)
    },
    mounted() {
      //监听弹窗变化
      window.onresize = () => {
        return (() => {
          this.setDialogWidth()
        })()
      }
    },
    methods:{
      //获取列表
      getList(data){
        getDepartmentList(data).then(res=>{
          console.log(res)
          this.tableData = res.data.data
          this.total = res.data.total
        })
      },
      //弹窗宽度变化
      setDialogWidth() {
        console.log(document.body.clientWidth)
        var val = document.body.clientWidth
        const def = 800 // 默认宽度
        if (val < def) {
          this.dialogWidth = '100%'
        } else {
          this.dialogWidth = def + 'px'
        }
      },
      //关闭弹窗，重置表单
      handleClose () {
        this.isCreateSection = false
        this.$refs.ruleForm.resetFields()
      },
      //新建科室
      createSection(){
        this.isCreateSection = true
        this.isEditSection = false
        this.ruleForm.name=''
      },
      //编辑科室
      editSection(row){
        console.log(row)
        this.isCreateSection = true
        this.isEditSection = true
        this.ruleForm.name = row.department_name
        this.id = row.id
      },
      //提交
      submitForm(){
        if(this.isEditSection){
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let data = {
                department_name:this.ruleForm.name
              }
              editDepartment(this.id,data).then(res=>{
                if(res.code==200){
                  // this.$message.success('编辑成功')
                  this.isCreateSection = false
                  this.getList(this.selectData)
                }else{
                  this.$message.error(res.msg)
                }
              })
            } else {
              return false;
            }
          });
        }else{
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let data = {
                department_name:this.ruleForm.name
              }
              createDepartment(data).then(res=>{
                if(res.code==200){
                  // this.$message.success('创建成功')
                  this.isCreateSection = false
                  this.getList(this.selectData)
                }else{
                  this.$message.error(res.msg)
                }
              })
            } else {
              return false;
            }
          });
        }
      },
      //删除科室
      deleteSection(id){
        this.$confirm('确认删除此科室?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDepartment(id).then(res=>{
            if(res.code===200){
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
              this.getList(this.selectData)
            }else{
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          })
        }).catch(() => {

        });
      },
      //关闭弹窗
      closeDialog(){
        this.isCreateSection = false
      },
      //监听条数变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      //监听页码变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    }
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/departmentManagement.scss";
</style>
<style>
  .el-dialog__header{
    border-bottom: 1px solid #E6E6E6;
  }
</style>

